<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<title>注册登录界面</title>
		<meta name="keywords" content="注册登录界面" />
		<meta name="description" content="最全的注册登录界面下载网站http://cn.inspinia.cn" />
		<link href="/css/style.css" rel="stylesheet" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
		<script src="/js/jquery-2.1.1.min.js" type="text/javascript"></script>
		<script type="application/x-javascript">
			addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
		</script>
		<style>
			.submit {
				border: 1px solid gray;
				width: 200px;
				height: 50px;
			}

			.canvas {
				padding: 0px;
				border: 10px;
				font-size: 100%;
				font: inherit;
				vertical-align: baseline;
				margin-top: 13px;
			}
		</style>
	</head>
	<body>
		<h1>Cube Sign In Form</h1>
		<div id="logDiv" class="app-block">
			<div class="cube">
				<img src="/images/cube.png" class="img-responsive" alt="" />
			</div>
			<form id="myForm" action="javascript:void(0);" method="post">
				<input
					type="text"
					id="userName"
					class="text"
					value="Login Id"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'login id';}"
					v-model="user.userName"
				/>
				<input
					type="password"
					id="password"
					value="Password"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'Password';}"
					v-model="user.password"
				/>

				<input
					class="form-control input-val"
					type="text"
					v-model="inputNum"
					placeholder="请输入验证码（不区分大小写）"
					style="float: left; width: 55%; margin-bottom: 0px"
				/>
				<canvas class="canvas" id="canvas" width="100" height="70" @click="draw();"></canvas>
				<!-- 添加按钮 -->
				<button id="bt01" class="submit" @click="login()">submit</button>
				<div class="clear"></div>
				<p><a href="#">Forgot Password ?</a></p>
			</form>
			<p class="sign">New here ? <a href="#"> Sign Up</a></p>
		</div>
		<div class="copy-right">
			<p>
				Copyright &copy; 2015 All rights Reserved | Template by &nbsp;<a
					href="https://shop585798004.taobao.com/"
					target="_blank"
					>前端ui</a
				>
			</p>
		</div>

		<script>
			var loginVue = new Vue({
				el: "#logDiv",
				data: {
					user: {
						userName: "",
						password: "",
					},
					showNum: [], //动态验证码字符数组
					inputNum: "",
				},
				methods: {
					login: function () {
						var self = this;
						if (this.user.userName == "" || this.user.password == "") {
							alert("请输入用户名和密码");
							return;
						}

						var showNumStr = this.showNum.join("");
						if (this.inputNum == "") {
							alert("请输入验证码");
							return;
						} else if (this.inputNum != showNumStr) {
							alert("验证码输入错误");
							return;
						}
						$.ajax({
							url: "/api/login",
							type: "post",
							contentType: "application/json",
							data: JSON.stringify(self.user),
							success: function (rs) {
								if (rs.status == 200) {
									location.href = "/index";
								} else {
									alert(rs.message);
								}
							},
							error: function (rs) {
								console.log(rs);
							},
						});
					},

					randomColor: function () {
						var r = Math.floor(Math.random() * 256);
						var g = Math.floor(Math.random() * 256);
						var b = Math.floor(Math.random() * 256);
						return "rgb(" + r + "," + g + "," + b + ")";
					},

					draw: function () {
						var canvas_width = $("#canvas").width();
						var canvas_height = $("#canvas").height();
						var canvas = document.getElementById("canvas"); //获取到canvas的对象
						var context = canvas.getContext("2d"); //获取到canvas画图的环境
						canvas.width = canvas_width;
						canvas.height = canvas_height;
						var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
						var aCode = sCode.split(",");
						var aLength = aCode.length; //获取到数组的长度
						for (var i = 0; i <= 3; i++) {
							var j = Math.floor(Math.random() * aLength); //获取到随机的索引值

							var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
							var txt = aCode[j]; //得到随机的一个内容
							this.showNum[i] = txt.toLowerCase();
							var x = 10 + i * 20; //文字在canvas上的x坐标
							var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
							context.font = "bold 23px 微软雅黑";
							context.translate(x, y);
							context.rotate(deg);
							context.fillStyle = this.randomColor();
							context.fillText(txt, 0, 0);
							context.rotate(-deg);
							context.translate(-x, -y);
						}

						for (var i = 0; i <= 5; i++) {
							//验证码上显示线条
							context.strokeStyle = this.randomColor();
							context.beginPath();
							context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.stroke();
						}

						for (var i = 0; i <= 30; i++) {
							//验证码上显示小点
							context.strokeStyle = this.randomColor();
							context.beginPath();
							var x = Math.random() * canvas_width;
							var y = Math.random() * canvas_height;
							context.moveTo(x, y);
							context.lineTo(x + 1, y + 1);
							context.stroke();
						}
					},
				},

				mounted() {
					this.draw();
				},
			});
		</script>
	</body>
</html>
